<template>
  <div class="countInfo">

		<div class="ci-left">
			<div class="tab-title">待料(总)</div>
			<div class="tab-content">{{waitMatTotal}}</div>
		</div>

		<div class="ci-middle">
			 <div class="hasfinished-day">
			 	  <div class="tab-title">完成(当日)</div>
			 	  <div class="tab-content">{{finishedDayCount}}</div>
			 </div>
			 <div class="hasfinished-month">
			 	  <div class="tab-title">完成(当月)</div>
                  <div class="tab-content">{{finishedMonthCount}}</div>
			 </div>
		</div>
        
        <div class="ci-third">
        	 <div class="tab-title">待出库(当日)</div>
        	 <div class="tab-content">{{waitLeaveCount}}</div>
        </div> 

		<div class="ci-right">
			  <div class="tab-title">自损片数(当日)</div>
			  <div class="tab-content">{{damageDay}}<span>片</span></div>
		</div>



  </div>
</template>

<script>
export default {
  props:[
        'waitMatTotal',
    	'finishedDayCount',
    	'finishedMonthCount',
    	'waitLeaveCount',
    	'damageDay' 
  ],
  data () {
    return {
    	// waitMatTotal:15,
    	// makeMatTotal:50,
    	// hasfinishedDayCount:18,
    	// hasfinishedMonthCount:65,
    	// outboundDay:8,
    	// damageDay:8 
    }
  }
}
</script>

<style scoped>

.countInfo{
	height:180px; 
	width:100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:20px 12px 12px 12px;
	box-sizing:border-box;
}
	
.ci-left,.ci-right,.ci-third{
	width:200px;
	height:150px;
	border:1px solid #fff;
	border-radius:5px;
	padding:25px 0;
	box-sizing:border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
}
.ci-middle{
	width:320px;
	height:150px;
	border:1px solid #fff;
	border-radius:5px;
	padding:25px 0;
	box-sizing:border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
		
.hasfinished-day,.hasfinished-month{
	width:50%;
	height:100%;
	border-right:1px solid #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
}
.hasfinished-month{
	border:none;
}
			
.ci-right{
	position:relative;
}
.ci-right span{
	position:absolute;
	top:98px;
	left:140px;
	color:#fff;
	font-size:20px;
}	
.tab-content{
	font-size:40px;
	color:#fff;
}

.tab-title{
	font-size:24px;
	color:#fff;
}
	
</style>